<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="name"></div>
	</body>
	<script>
		(function(){
			var o = {
				name:"",
				setName:function(name){
					this.name = name;
				},
				getName:function(name){
					return this.name;
				}
			}
			o.setName("yangguanyong")
			console.log(o.getName())
		});
		(function(){
			function getName(val){
				var aEle = document.getElementById('name');
				aEle.innerHTML = val;
			};
			var o = {
				set name(val){
					this.nameVal = val;         //这里不能再使用name，不然会进入死循环
					//比如vue，在这里就可以检查虚拟的DOM哪里有用到nameVal，用到的就更新虚拟DOM
					getName(this.nameVal);
				},
				get name(){
					return this.nameVal;
				}
			}
			window.o = o;
			o.name = "yangguanyong";
			setTimeout(function(){
				o.name = "hehehhe";
			},2000);
		})();
	</script>
</html>
